[Cases] Custom Fields as Cases Filters #171176

jcger · 2023-11-14T11:55:20Z

Meta issue: #167651

Summary

Screenshot.mov

What this PR does not include (will be done in future PRs)

If the users adds to many filters, the UI will overflow
If the url contains status or severity set and the filter is not active, we need to automatically activate that filter and set the filter option

useEffect situation

We tried to remove some useEffects, specifically in useFilterConfig and useSystemFilterConfig but as they have dependencies that are loaded from API's, there are some use cases, like if a new custom field is added or removed where effects (I think) are a must. We will come back to this issue once we have the feature in main to try to solve this issue

…67651-custom-fields-as-filters

…-fix'

…ger/kibana into issue-167651-custom-fields-as-filters

…67651-custom-fields-as-filters

…om-fields-as-filters

…ger/kibana into issue-167651-custom-fields-as-filters

jcger · 2023-11-27T11:14:35Z

x-pack/plugins/cases/public/common/mock/test_providers.tsx

@@ -129,7 +129,7 @@ export interface AppMockRenderer {
  render: UiRender;
  coreStart: StartServices;
  queryClient: QueryClient;
-  AppWrapper: React.FC<{ children: React.ReactElement }>;
+  AppWrapper: React.FC<{ children: React.ReactNode }>;


I got an ts error here https://github.com/elastic/kibana/pull/171176/files#diff-5ce927c2e523c85bb1853fd933c3469c1881f69eef57ff75be97e622b18621a0R54. Looks like changing this does not break anything

Seems fine to me. Unrelated to the type change, what about wrapper: appMockRender.AppWrapper?

I tried but it returns another ts error

Type 'FC<{ children: ReactNode; }>' is not assignable to type 'WrapperComponent<{ systemFilterConfig: FilterConfig[]; onFilterOptionChange: FilterChangeHandler; }> | undefined'.

Any idea what it means?

jcger · 2023-11-27T11:15:21Z

x-pack/plugins/cases/public/components/all_cases/multi_select_filter.test.tsx

@@ -161,4 +161,23 @@ describe('multi select filter', () => {
    await waitForEuiPopoverOpen();
    expect(screen.getAllByTestId(TEST_ID).length).toBe(2);
  });
+
+  it('should not show the amount of options if hideActiveOptionsNumber is active', () => {


new feature as the "more" button doesn't seem to be showing this info

jcger · 2023-11-27T11:26:11Z

x-pack/plugins/cases/public/containers/api.test.tsx

-        query: {
-          ...DEFAULT_QUERY_PARAMS,
+      expect(fetchMock).toHaveBeenCalledWith(`${CASES_INTERNAL_URL}/_search`, {
+        method: 'POST',


migration from _find to _search using post and body as string

jcger · 2023-11-27T11:33:40Z

x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx

@@ -257,4 +309,459 @@ describe('CasesTableFilters ', () => {
      expect(onCreateCasePressed).toHaveBeenCalledWith();
    });
  });
+
+  describe('toggle type custom field filter', () => {


Most of the tests for this feature are here. This way we test the whole integration with the table

elasticmachine · 2023-11-27T12:13:46Z

Pinging @elastic/response-ops (Team:ResponseOps)

elasticmachine · 2023-11-27T12:13:48Z

Pinging @elastic/response-ops-cases (Feature:Cases)

cnasikas

Great code! I really liked the architecture and how clean it is. Some comments:

If you add two custom fields, filter both of them by some value, delete them in another tab, and then switch to the tab where you filtered you will see this error:

Probably because two API calls are happening and the first one contains the second custom field

I was playing around with creating multiple custom fields and deleting them and I managed to produce this bug. I don't know how. I cannot reproduce it 🙂

I think we should remove the +more button from the modal. Wdyt?
When I search for In progress it does not show. I guess we are searching in the keys, right?

x-pack/plugins/cases/common/ui/types.ts

cnasikas · 2023-11-27T15:38:10Z

x-pack/plugins/cases/public/common/mock/test_providers.tsx

@@ -129,7 +129,7 @@ export interface AppMockRenderer {
  render: UiRender;
  coreStart: StartServices;
  queryClient: QueryClient;
-  AppWrapper: React.FC<{ children: React.ReactElement }>;
+  AppWrapper: React.FC<{ children: React.ReactNode }>;


Seems fine to me. Unrelated to the type change, what about wrapper: appMockRender.AppWrapper?

x-pack/plugins/cases/public/components/all_cases/severity_filter.test.tsx

...ns/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx

x-pack/plugins/cases/public/components/custom_fields/translations.ts

x-pack/plugins/cases/public/containers/api.ts

x-pack/plugins/cases/public/containers/utils.test.ts

x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_filter_config.tsx

x-pack/plugins/cases/public/components/all_cases/table_filters.tsx

...ns/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx

x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_filter_config.tsx

jcger · 2023-11-29T14:07:56Z

Great code! I really liked the architecture and how clean it is. Some comments:

If you add two custom fields, filter both of them by some value, delete them in another tab, and then switch to the tab where you filtered you will see this error:
Probably because two API calls are happening and the first one contains the second custom field

I was playing around with creating multiple custom fields and deleting them and I managed to produce this bug. I don't know how. I cannot reproduce it 🙂

I think we should remove the +more button from the modal. Wdyt?

When I search for In progress it does not show. I guess we are searching in the keys, right?

Should be fixed now, after your idea, instead of updating one by one, each filter will return its part of the final filter so we can merge everything together and do just one call. This is the config and here and here you will find how it's being applied. I also changed the filter on change function to work with partial filter options and in the system config hook and custom field config hook is where we convert the multi select component output to our filter options
Solved with this change also added test
It is not rendered anymore here and the custom field config is not build
We were searching in label but the label wasn't the right one, thanks to this change and some fine tuning to allow the key to be CaseStatuses type and not only string, it should be working now. I added a test for it

kibana-ci · 2023-11-29T17:31:24Z

💔 Build Failed

Failed CI Steps

Metrics [docs]

‼️ ERROR: no builds found for mergeBase sha [1e68656]

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cnasikas

I tested and all the issues are fixed now 🚀. Code LGTM. Thanks for addressing our feedback. I found the following small issues. We can fix them on another PR:

The search payload contains empty custom fields. I think is better if we omit the empty object.

Every time you delete 2+ custom fields two calls are being made with the one failing but no toaster is shown (probably due to the call being canceled immediately). I think you mentioned the same in our meeting.

…lds (#172276) Meta issue #167651 Fixes: #167651 ## Summary Previous PRs merged into this feature branch: - #169356 - #169371 - #170851 - #171102 - #171176 ## Release notes Case list filter bar can now be customised. Filters can be removed and custom fields can be used as filters ## Pending issues - Table in modal shouldn’t load in local storage saved filter options of status/severity - Status & Severity filters in url. Filters must be activated if the user has them deactivated - UI overflow when to much filters are active - Race condition: When a user has a custom field active with an option selected and this custom field gets removed in settings, it includes the removed custom field when refreshing. This request will fail, triggering a second one which won't include the removed custom field - Found during QA. In the modal, when trying to select all options in the solutions filter, when checking the last unchecked option, it resets and there is no checked option anymore ## Flaky test runner link https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/4128 --------- Co-authored-by: Antonio <[email protected]> Co-authored-by: kibanamachine <[email protected]>

jcger added 5 commits November 9, 2023 17:40

first commit

cf63dac

working filter status

4b5371f

use maps

7b86adc

Merge branch 'cases/167651' of github.com:elastic/kibana into issue-1…

ad0cea3

…67651-custom-fields-as-filters

refactor to use option keys

c9c9555

jcger added Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) Feature:Cases Cases feature release_note:feature Makes this part of the condensed release notes v8.12.0 labels Nov 14, 2023

kibanamachine and others added 5 commits November 14, 2023 12:37

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

252e0b1

…-fix'

minor changes

3a48a2f

Merge branch 'issue-167651-custom-fields-as-filters' of github.com:jc…

8b7c774

…ger/kibana into issue-167651-custom-fields-as-filters

add persistence

ca2c4a4

renaming

1f5df78

jcger added release_note:skip Skip the PR/issue when compiling release notes and removed release_note:feature Makes this part of the condensed release notes labels Nov 16, 2023

jcger added 14 commits November 16, 2023 16:59

first tests

d84f402

filter tests

b5cc9b1

set right local storage key for filter config

e8bc6b9

add customFields in FilterOptions

3fd75c4

add customField filters in query

5f58c3d

Merge branch 'cases/167651' of github.com:elastic/kibana into issue-1…

1e426f3

…67651-custom-fields-as-filters

Merge branch 'main' of github.com:jcger/kibana into issue-167651-cust…

3c5c108

…om-fields-as-filters

Merge branch 'cases/167651' into issue-167651-custom-fields-as-filters

36615d0

Merge branch 'issue-167651-custom-fields-as-filters' of github.com:jc…

b8df42d

…ger/kibana into issue-167651-custom-fields-as-filters

custom fields as part of the filter query

c98f2bb

add prefix to custom field keys

a3ac59b

update getCases test + custom fields test

21d2137

add custom field filter test

88a4e04

added onDelete prop on filters

c915c16

jcger added 6 commits November 24, 2023 09:23

remove filter when custom field does not exist anymore

7f6bc68

remove keys in storage that does not exist + refactor merge fn

6181709

filter out unavailable filters in hook

24d6e79

test dissappearing filter effect + smaller changes

177f26c

Merge branch 'cases/167651' into issue-167651-custom-fields-as-filters

68d7731

remove not needed comment

c746466

jcger commented Nov 27, 2023

View reviewed changes

set back available filtering

ff764d0

jcger marked this pull request as ready for review November 27, 2023 12:13

jcger requested a review from a team as a code owner November 27, 2023 12:13

cnasikas reviewed Nov 28, 2023

View reviewed changes

adcoelho reviewed Nov 28, 2023

View reviewed changes

...ns/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx Show resolved Hide resolved

adcoelho reviewed Nov 28, 2023

View reviewed changes

...ns/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx Show resolved Hide resolved

adcoelho reviewed Nov 28, 2023

View reviewed changes

x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_filter_config.tsx Show resolved Hide resolved

fix more than one field removed but + comments

4ac9a16

adcoelho reviewed Nov 28, 2023

View reviewed changes

x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_filter_config.tsx Show resolved Hide resolved

jcger added 3 commits November 28, 2023 17:45

remove more button from selector view + pr review

4b26020

pr review

8b1f351

review

6b5f78b

jcger added 2 commits November 29, 2023 16:13

multi select key type to work with case statuses

11a8ee2

search by label test

4d439b6

cnasikas approved these changes Nov 30, 2023

View reviewed changes

jcger merged commit 219cbbd into elastic:cases/167651 Nov 30, 2023
26 of 29 checks passed

jcger mentioned this pull request Nov 30, 2023

[Cases] Cases Table: Configure Available Filters Including Custom Fields #172276

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cases] Custom Fields as Cases Filters #171176

[Cases] Custom Fields as Cases Filters #171176

jcger commented Nov 14, 2023 •

edited

Loading

jcger Nov 27, 2023

cnasikas Nov 27, 2023

jcger Nov 28, 2023

jcger Nov 27, 2023

jcger Nov 27, 2023

jcger Nov 27, 2023

elasticmachine commented Nov 27, 2023

elasticmachine commented Nov 27, 2023

cnasikas left a comment

cnasikas Nov 27, 2023

jcger commented Nov 29, 2023 •

edited

Loading

kibana-ci commented Nov 29, 2023 •

edited

Loading

cnasikas left a comment

[Cases] Custom Fields as Cases Filters #171176

[Cases] Custom Fields as Cases Filters #171176

Conversation

jcger commented Nov 14, 2023 • edited Loading

Summary

What this PR does not include (will be done in future PRs)

useEffect situation

jcger Nov 27, 2023

Choose a reason for hiding this comment

cnasikas Nov 27, 2023

Choose a reason for hiding this comment

jcger Nov 28, 2023

Choose a reason for hiding this comment

jcger Nov 27, 2023

Choose a reason for hiding this comment

jcger Nov 27, 2023

Choose a reason for hiding this comment

jcger Nov 27, 2023

Choose a reason for hiding this comment

elasticmachine commented Nov 27, 2023

elasticmachine commented Nov 27, 2023

cnasikas left a comment

Choose a reason for hiding this comment

cnasikas Nov 27, 2023

Choose a reason for hiding this comment

jcger commented Nov 29, 2023 • edited Loading

kibana-ci commented Nov 29, 2023 • edited Loading

💔 Build Failed

Failed CI Steps

Metrics [docs]

History

cnasikas left a comment

Choose a reason for hiding this comment

jcger commented Nov 14, 2023 •

edited

Loading

jcger commented Nov 29, 2023 •

edited

Loading

kibana-ci commented Nov 29, 2023 •

edited

Loading